<template>
    <div class="travel" v-if="title">
        <page-title :title="title"></page-title>
        <div class="collapse" v-for="(item,index) in travel" :key="index">
            <div class="collapse-title" @click="changeItem(item)" :class="item.isCurrent?'a':'b'">
                {{new Date(item.date) | formatTime('y-m-d a')}}
                <div class="collapse-arrow" :class="item.isCurrent?'open_menu':'close_menu'">
                    <i class="iconfont icon-arrowdown"></i>
                </div>
            </div>
            <div class="collapse-item" :class="item.isCurrent?'open_item':'close_item'">
                <footprint :data="item.list" :timeFormat="'h:i'"></footprint>
            </div>
        </div>
    </div>
</template>

<script>
import Footprint from '@/components/Footprint'
import { findTripList } from '@/api/activity.js'
import { getEnterpriseInfo } from "@/api/enterprise";
export default {
    data() {
        return {
            packetId: this.$route.query.packetId,
            activeName: null,
            nowTime: +new Date(),
            travel: [],
            title: null,
            shareUserId: this.$route.query.shareUserId,
        }
    },
    components: {
        Footprint
    },
    mounted() {
        this.$nextTick(function () {
            // 数组原型添加方法
            Array.prototype.contains = function (obj) {
                var i = this.length;
                while (i--) {
                    if (this[i] === obj) {
                        return true;
                    }
                }
                return false;
            }
            findTripList(this.packetId).then(async res => {
                this.title = res.packet.title
                this.travel = JSON.parse(res.packet.content).route
                // 映射出 date 时间属性
                var tempList = this.travel.map(item => item.date)
                var dateList = new Array();
                var travleList = new Array()
                for (let i = 0; i < tempList.length; i++) {
                    // 当时间相同时，数组对象push进入新数组中
                    if (!dateList.contains(tempList[i])) {
                        dateList.push(tempList[i])
                        let obj = {
                            isCurrent: false,
                            date: null,
                            list: [],
                        }
                        obj.date = tempList[i]
                        obj.list = this.travel.filter(item => item.date == tempList[i])
                        travleList.push(obj)
                    }
                }
                this.travel = travleList
                if (res.packet != null) {
                    let share_thumburl = res.packet.share_thumburl
                    if (!share_thumburl) {
                        getEnterpriseInfo().then(resp => {
                            share_thumburl = resp.enterprise.logo_1x1
                        });
                    }
                    this.wxShare(this.packetId, this.shareUserId, res.packet.share_title ? res.packet.share_title : res.packet.title,
                        res.packet.share_remarks ? res.packet.share_remarks : res.packet.title, share_thumburl, () => { }, 3)
                }
            })
        })
    },
    methods: {
        changeItem(item) {
            item.isCurrent = !item.isCurrent
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.collapse-arrow {
  float: right;
}
/* chevron animation  */
@keyframes open-menu {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@keyframes close-menu {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.open_menu {
  animation: open-menu 0.4s ease-out forwards;
}
.close_menu {
  animation: close-menu 0.4s ease-out forwards;
}
</style>
